<template>
  <div>
    <div class="home_header">
      <div class="home_hearder_item">
        <el-dropdown>
          <span class="el-dropdown-link">
            下拉菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <p
                :class="{'active':index==active}"
                v-for="(item,index) in slid"
                :key="index"
                @click="screen(index)"
              >{{item.title}}</p>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="home_header_sort">
        <span @click="ascend">价格升序</span>
        <span @click="descend">价格降序</span>
      </div>
    </div>
    <div class="home_body">
      <div class="home_left">
        <p
          :class="{'active':index==active}"
          v-for="(item,index) in slid"
          :key="index"
          @click="screen(index)"
        >{{item.title}}</p>
      </div>
      <div class="home_right">
        <el-row :gutter="10">
          <el-col :xs="24" :md="8" :lg="6" v-for="(item,index) in screenGoods" :key="index">
            <div class="home_right_item">
              <img :src="item.productImage" />
              <p>{{item.productName}}</p>
              <p>
                <b>￥{{item.salePrice}}</b>
              </p>
              <p @click="addCart(item)">加入购物车</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="loading" v-customShow="isShowLoading">
      <img src="http://localhost:8080/loading.jpg" alt />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      screenGoods: [], //展示列表
      active: 0, //选中样式
      isShowLoading: false, //显示或隐藏
      page: 2 //路由
    };
  },
  mounted() {
    axios.get("/api/data.json").then(res => {
      this.screenGoods = res.data.result.list;
    });

    this.$store.dispatch("getGoods");

    //上拉加载内容
    window.addEventListener("scroll", () => {
      //获取文档的高度
      var docHeight = document.documentElement.scrollHeight;

      //获取当前窗口的高度（可视区域）
      var client = document.documentElement.clientHeight;

      //获取滚动的距离
      var scrollOffset = document.documentElement.scrollTop;

      if (docHeight - client - scrollOffset === 0) {
        // window.console.log("已到达文档底部")
        this.isShowLoading = true;
        //执行异步请求
        window.setTimeout(() => {
          if (this.page > 3) {
            this.isShowLoading = false;
            return;
          }
          axios
            .get(`/api/data${this.page}.json`)
            .then(res => {
              this.screenGoods.push(...res.data.result.list);
            })
            .catch(err => {
              console.error(err);
            });
          this.isShowLoading = false;
          this.page++;
        }, 3000);
      }
    });
  },
  computed: {
    goods: function() {
      return this.$store.state.goods;
    },
    slid: function() {
      return this.$store.state.slid;
    }
  },
  methods: {
    screen(index) {
      //筛选
      this.active = index;
      this.screenGoods = [];
      if (index === 0) {
        this.screenGoods = this.goods;
      } else if (index === 1) {
        this.goods.map(item => {
          if (item.salePrice < 100) {
            this.screenGoods.push(item);
          }
        });
      } else if (index === 2) {
        this.goods.map(item => {
          if (item.salePrice >= 100 && item.salePrice < 500) {
            this.screenGoods.push(item);
          }
        });
      } else if (index === 3) {
        this.goods.map(item => {
          if (item.salePrice >= 500 && item.salePrice < 1000) {
            this.screenGoods.push(item);
          }
        });
      } else if (index === 4) {
        this.goods.map(item => {
          if (item.salePrice >= 1000 && item.salePrice < 2000) {
            this.screenGoods.push(item);
          }
        });
      }
    },
    ascend() {
      //升序
      this.screenGoods.sort((a, b) => {
        return a.salePrice - b.salePrice;
      });
    },
    descend() {
      //降序
      this.screenGoods.sort((a, b) => {
        return b.salePrice - a.salePrice;
      });
    },
    addCart(item){
      //加购物车
      this.$store.dispatch("add_Cart",item)
      this.$router.push({
        path:"/cart"
      })
    }
  },
  directives: {
    //自定义指令
    customShow: {
      bind() {},
      inserted(el, binding) {
        if (binding.value) {
          el.style.visibility = "visible";
        } else {
          el.style.visibility = "hidden";
        }
      },
      update(el, binding) {
        if (binding.value) {
          el.style.visibility = "visible";
        } else {
          el.style.visibility = "hidden";
        }
      }
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  background-color: #F4F6FA;
}
.loading {
  width: 100%;
  height: 100px;
  background-color: #fff;
  text-align: center;
}
.loading img {
  width: 150px;
}
.home_header {
  width: 100%;
  height: 64px;
  background-color: #f4f6fa;
  display: flex;
  justify-content: space-between;
}
.home_hearder_item {
  display: none;
  height: 0%;
  line-height: 64px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #999;
  font-size: 20px;
}
.el-icon-arrow-down {
  font-size: 20px;
}
.home_header_sort {
  width: 50%;
  height: 100%;
  line-height: 64px;
  float: right;
}
.home_header_sort span {
  width: 30%;
  margin: 0px 10px;
  background-color: #f4f6fa;
}
.home_body {
  width: 100%;
  display: inline-flex;
}
.active {
  color: red;
  font-weight: 900;
}
.home_left {
  width: 20%;
  height: 300px;
  font-size: 24px;
  background-color: #fff;
}
.home_left p {
  margin-top: 5px;
  background-color: #fff;
}
.home_right {
  width: 80%;
}
.home_right_item {
  width: 220px;
  background-color: #fff;
  margin: 5px 20px;
}
.home_right_item img {
  width: 100%;
}
.home_right_item p {
  width: 90%;
  margin-left: 5%;
  background-color: #fff;
  color: #999;
}
.home_right_item p b {
  color: #d31225;
}
.home_right_item p:nth-child(4) {
  width: 90%;
  margin-left: 5%;
  color: #d31225;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #d31225;
}
@media screen and (max-width: 992px) {
  .home_right_item {
    width: 100%;
    background-color: #fff;
    margin: 5px 0px;
    display: inline-flex;
    flex-wrap: nowrap;
  }
  .home_right_item img {
    width: 30%;
  }
  .home_left {
    display: none;
  }
  .home_right {
    width: 100%;
  }
  .home_hearder_item {
    display: block;
  }
}
</style>
